<template>
  <div class="history">
    <div class="btn">
      <px-button type="primary" @click="handleBack">
        <px-icon><ArrowLeft /></px-icon>返回
      </px-button>
    </div>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 233px)" border>
      <px-table-column label="序号" min-width="60" align="center" fixed="left">
        <template #default="{ $index }">
          {{ (paginationInfo.currentPage - 1) * paginationInfo.pageSize + $index + 1 }}
        </template>
      </px-table-column>
      <px-table-column prop="updateTime" label="更新时间" show-overflow-tooltip />
      <px-table-column prop="point" label="报警点位" show-overflow-tooltip />
      <px-table-column prop="alarmLevel" label="报警级别" show-overflow-tooltip>
        <template #default="scope">
          <px-tag v-if="scope.row.alarmLevel" style="color: #fff" round :color="tagBgColorList[scope.row.alarmLevel]">
            {{ scope.row.alarmLevel }}
          </px-tag>
          <span v-else />
        </template>
      </px-table-column>
      <px-table-column prop="alarmType" label="报警类型" show-overflow-tooltip />
      <px-table-column prop="alarmDesc" label="报警描述" show-overflow-tooltip />
      <px-table-column prop="factoryName" label="厂区" show-overflow-tooltip />
      <px-table-column prop="className" label="科室" show-overflow-tooltip />
      <px-table-column prop="systemName" label="系统" show-overflow-tooltip />
      <px-table-column prop="twinName" label="所属设备" show-overflow-tooltip />
      <px-table-column prop="twinPosition" label="位置" show-overflow-tooltip />
      <px-table-column prop="updateUser" label="更新人" show-overflow-tooltip />
      <px-table-column fixed="right" label="操作" width="240" align="center">
        <template #default="scope">
          <px-tooltip content="回退" placement="top">
            <px-button link type="primary" icon="Rollback" @click="handleRollback(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="paginationInfo.total > 0"
      v-model:page="paginationInfo.currentPage"
      v-model:limit="paginationInfo.pageSize"
      :total="paginationInfo.total"
      @pagination="getList"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { PxMessageBox, PxMessage } from "px-ui";

import type { PaginationType } from "@/type";
import type { UpdateRecordItem } from "@/api/alarm";
import { getAlarmUpdateRecord, pointRollback } from "@/api/alarm";

import type { PropsTypeForHistory, EmitsTypeForHistory } from "../type";

const props = defineProps<PropsTypeForHistory>();
const emits = defineEmits<EmitsTypeForHistory>();

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

const tableData = ref<UpdateRecordItem[]>([]);
const paginationInfo = reactive<PaginationType<number>>({
  currentPage: 1,
  pageSize: 20,
  total: 1
});

const handleBack = () => {
  emits("close");
  emits("refresh");
};

const getList = async () => {
  const res = await getAlarmUpdateRecord({
    point: props.point,
    pageNum: paginationInfo.currentPage,
    pageSize: paginationInfo.pageSize
  });
  paginationInfo.total = res.total;
  paginationInfo.pageSize = res.pageSize;
  paginationInfo.currentPage = res.pageNum;
  tableData.value = res.data;
};

const handleRollback = async (row: UpdateRecordItem) => {
  PxMessageBox.confirm(`是否将报警点位${row.point}设定信息回退至${row.updateTime}版本？`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  }).then(async () => {
    const res = await pointRollback({ id: row.id });
    if (res) {
      PxMessage.success("更新成功!");
      getList();
    }
  });
};

if (props.point) {
  getList();
}
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.history {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 16px 24px;
  .btn {
    margin-bottom: 16px;
  }
}
</style>
